const App = () => {
  const handleClick = function (e) {
    console.log(e);
  };
  const handleClick1 = (e) => {
    console.log(this, e, 'ee');
  };
  const handleMouseEnter = (e) => {
    console.log(e, 'me');
  };
  const handleParentClick = (e) => {
    console.log(e, 'parent');
  };
  const handleFuncClick = function (num) {
    return (e) => {
      console.log(num);
      console.log(e);
    };
  };
  const handleArrowClick = (e, num) => {
    console.log(e, num);
  };

  return (
    <>
      <div>
        <button onClick={handleClick} onMouseEnter={handleMouseEnter}>
          点击
        </button>
        <button onClick={handleClick1}>点击1</button>
      </div>

      <div onClick={handleParentClick}>
        <button>Click me</button>
        <button>Click me too</button>
      </div>

      <div>
        <button onClick={handleFuncClick(123)}>传参 - 高阶函数 </button>
        <button onClick={handleArrowClick}>不传参 - 箭头函数 </button>
        <button
          onClick={(e) => {
            handleArrowClick(123, e);
          }}
        >
          传参 - 箭头函数2
        </button>
      </div>
    </>
  );
};
export default App;
